<template>
  <div class="card-wrap">
    <el-card :body-style="{padding: '0px'}" class="card">
      <div class="card-cover" :class="cardStatus" @click="previewClick">
        <div v-show="myData.status !== -1" class="logo" :class="logoStatus">{{ title }}</div>
      </div>
      <div class="card-info">
        <div style="text-align: left">
          <span class="text title" @click="previewClick">{{ myData.QName }}</span>
          <span class="text type" style="float: right;">{{ '[' + formatType(myData.type) + ']' }}</span>
        </div>
        <div class="card-statistics clearfix">
          <div class="card-recycle clearfix">
            <div style="color: #aaaaaa; font-size: 14px;">回收: {{ myData.count }}份</div>
            <div style="color: #aaaaaa; font-size: 14px;">截止: {{ myData.ETime === 'None' ? '未设置' : myData.ETime }}</div>
          </div>
        </div>
        <div class="card-operation">
          <el-tooltip v-if="myData.status !== -1 && myData.status !== 1 " content="开启" placement="bottom">
            <i class="iconfont icon-play-circle operation" @click="releaseClick"></i>
          </el-tooltip>
          <el-tooltip v-else-if="myData.status !== -1 && myData.status === 1" content="关闭" placement="bottom">
            <i class="iconfont icon-timeout operation" @click="releaseClick"></i>
          </el-tooltip>
          <el-tooltip v-show="myData.status !== -1" content="编辑" placement="bottom">
            <i class="iconfont icon-edit operation" @click="editClick"></i>
          </el-tooltip>
          <el-tooltip content="统计" placement="bottom">
            <i class="iconfont icon-piechart operation" @click="statisticsClick"></i>
          </el-tooltip>
          <el-tooltip content="预览" placement="bottom">
            <i class="iconfont icon-eye operation" @click="previewClick"></i>
          </el-tooltip>
          <el-dropdown placement="bottom-start" trigger="click" @command="handleCommand" style="float: right; margin-right: 0;">
            <span><i class="iconfont icon-more operation" style="float: right;"></i></span>
            <el-dropdown-menu slot="dropdown" :visible-arrow="false">
              <el-dropdown-item v-show="myData.status !== -1" command="分享">分享</el-dropdown-item>
              <el-dropdown-item v-show="myData.status !== -1" command="导出数据">导出数据</el-dropdown-item>
              <el-dropdown-item v-show="myData.status !== -1" command="复制">复制</el-dropdown-item>
              <el-dropdown-item v-show="myData.status !== -1" command="移动到回收站">移动到回收站</el-dropdown-item>
              <el-dropdown-item v-show="myData.status === -1" command="恢复">恢复</el-dropdown-item>
              <el-dropdown-item v-show="myData.status === -1" command="彻底删除">彻底删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// TODO: 优化卡片样式
export default {
  name: "card",
  props: ["myData", "myIndex"],
  data() {
    return {};
  },
  computed: {
    logoStatus: function () {
      return {
        "card-logo-gray": this.myData.status === 2,
        "card-logo-blue": this.myData.status === 1,
        "card-logo-green": this.myData.status === 0
      };
    },
    cardStatus: function () {
      return {
        "card-img-unreleased": this.myData.status === 0,
        "card-img-released": this.myData.status === 1,
        "card-img-finished": this.myData.status === 2
      }
    },
    title: function () {
      return this.$store.state.questionnaireStatus[this.myData.status];
    }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case '分享':
          this.shareClick();
          break;
        case '导出数据':
          this.exportClick();
          break;
        case '复制':
          this.copyClick();
          break;
        case '移动到回收站':
          this.removeClick();
          break;
        case '恢复':
          this.restoreClick();
          break;
        case '彻底删除':
          this.deleteClick();
          break;
        default: break;
      }
    },
    shareClick() {
      this.$emit("card-share", this.myData.qid);
    },
    releaseClick() {
      this.$emit("card-release", this.myData.qid, this.myData.status, this.myIndex);
    },
    editClick() {
      this.$emit("card-edit", this.myData.qid);
    },
    deleteClick() {
      this.$emit("card-delete", this.myData.qid, this.myIndex);
    },
    statisticsClick() {
      this.$emit("card-statistics", this.myData.qid);
    },
    previewClick() {
      this.$emit("card-preview", this.myData.qid, this.myIndex);
    },
    exportClick() {
      this.$emit("card-export", this.myData.qid);
    },
    copyClick() {
      this.$emit("card-copy", this.myData.qid);
    },
    removeClick() {
      this.$emit("card-remove", this.myData.qid, this.myIndex);
    },
    restoreClick() {
      this.$emit("card-restore", this.myData.qid, this.myIndex);
    },
    formatType(oldType) {
      let str = '普通问卷'
      switch (oldType) {
        case 'normal':
          str = '普通问卷';
          break;
        case 'vote':
          str = '投票问卷';
          break;
        case 'sign':
          str = '报名问卷';
          break;
        case 'exam':
          str = '考试问卷';
          break;
        default:
          break;
      }
      return str;
    },
  }
};
</script>

<style scoped>
.card-wrap {
  float: left;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.card {
  display: block;
  width: 230px;
  height: 270px;
  margin: 0 auto;
  background-color: white;

  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.card:hover {
  margin-top: -3px;
}

.card-cover {
  margin-top: 10px;
  position: relative;
  cursor: pointer;
  height: 161px;
  overflow: hidden;

  width: 100%;
  background-image: url("../../assets/unreleased.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.logo {
  margin-left: 10px;
  height: 22px;
  width: 55px;
  line-height: 22px;
  font-size: 13px;
  float: left;
  border-style: solid;
  border-width: 2px;
  border-radius: 15px;
  border-color: #409eff;
  color: #409eff;
}

.card-img-unreleased {
  background-image: url("../../assets/unreleased.svg");
}

.card-img-released {
  background-image: url("../../assets/released.svg");
}

.card-img-finished {
  background-image: url("../../assets/finished.svg");
}

.card-logo-gray {
  color: #909399;
  border-color: #909399;
}

.card-logo-blue {
  color: #409eff;
  border-color: #409eff;
}

.card-logo-green {
  color: #67c23a;
  border-color: #67c23a;
}

.card-info {
  padding: 5px 14px;
}

.text {
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type {
  color: #aaaaaa;
  font-size: 14px;
}

.title:hover {
  color: #2378ff;
  cursor: pointer;
}

.card-statistics {
  padding-top: 5px;
  overflow: hidden;
}

.card-recycle {
  float: left;
  width: 100%;
  text-align: left;
}

.card-recycle .card-id {
  width: 50%;
  color: #aaaaaa;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-operation {
  padding-top: 5px;
}

.operation {
  float: left;
  font-size: 18px;
  font-weight: 500;
  margin-right: 15px;
  cursor: pointer;
}

.operation:hover {
  color: #2378ff;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
</style>